<template>
  <div>
    <!--查询条件-->
    <div>
      <!--按照Id查-->
      <el-row>
        <el-col :span=2>
          <el-tag>编号</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_Id'></el-input>
        </el-col>
        <!--按照年份查-->
        <el-col :span=2>
          <el-tag>资金年度</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_year'></el-input>
        </el-col>
        <!--按照起始和结束日期查-->
        <el-col :span=2>
          <el-tag>起始日期</el-tag>
        </el-col>
        <el-col :span=3>
          <div class="block">
            <el-date-picker
              v-model="para_startDate"
              type="date"
              style="width:100%"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span=2>
          <el-tag>截止日期</el-tag>
        </el-col>
        <el-col :span=3>
          <div class="block">
            <el-date-picker
              v-model="para_endDate"
              type="date"
              style="width:100%"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-col>
        <!--按照金额范围查-->
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span=2>
          <el-tag>最小金额</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_minPrice'></el-input>
        </el-col>
        <el-col :span=2>
          <el-tag>最大金额</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_maxPrice'></el-input>
        </el-col>
        <!--按照收入类别查-->
        <el-col :span=2>
          <el-tag>收入类别</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_category'></el-input>
        </el-col>
        <!--查询按钮-->
        <el-col :span=3 push="1">
          <el-button type="primary" @click="queryRecords">查询</el-button>
        </el-col>
        <!--添加按钮-->
        <el-col :span=3>
          <el-button type="primary" @click="add_data" >添加</el-button>
        </el-col>

      </el-row>
    </div>
    <el-divider></el-divider>
    <!--表格数据-->
    <el-table border=""
      :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
      stripe
      style="width: 100%" >
      <el-table-column
        prop="id"
        label="收入编号"
        width="165px">
      </el-table-column>
      <el-table-column
        prop="year"
        label="资金年度"
        width="200">
      </el-table-column>
      <el-table-column
        prop="incomeDate"
        label="收入日期"
        width="200">
      </el-table-column>
      <el-table-column
        prop="source"
        label="收入来源"
        width="200">
      </el-table-column>
      <el-table-column
        prop="category"
        label="收入类别"
        width="200">
      </el-table-column>
      <el-table-column
        prop="money"
        label="金额"
        width="200">
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>
    <!--模态框-->
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <div class="dialog-style">
        <!--form表单（添加事件）-->
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="收入编号">
            <el-input v-model="formLabelAlign.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="资金年度">
            <el-input v-model="formLabelAlign.year"></el-input>
          </el-form-item>

          <el-form-item label="收入日期">
            <!--日期选择器-->
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker style="width: 100%"
                v-model="formLabelAlign.incomeDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>

          <el-form-item label="收入来源">
            <el-input v-model="formLabelAlign.source"></el-input>
          </el-form-item>

          <el-form-item label="收入类别">
            <!--类别选择器-->
            <el-select v-model="formLabelAlign.icId" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in options"
                :label="item.label"
                :key="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="收入金额">
            <el-input v-model="formLabelAlign.money"></el-input>
          </el-form-item>
        </el-form>

      </div>
      <!--模态框中的按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="FormCommit">提 交</el-button>
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>


import instance from "../../../utils/request";

export default {
  name:"MoneyManagement",             //组件名称
  data() {
    return {
      dialogVisible:false,
      para_Id:'',
      para_name:'',
      para_year:'',     //资金年度
      para_category:'', //种类
      para_minPrice:'', //最小金额
      para_maxPrice:'', //最大金额
      para_startDate:'',//起始日期
      para_endDate:'',  //截至日期

      tableData: [],
      // 默认显示第几页
      currentPage:1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:0,
      // 个数选择器（可修改）
      pageSizes:[1,2,3,4,5,6],
      // 默认每页显示的条数（可修改）
      PageSize:6,

      labelPosition: 'right',
      //formLabelAlign对象
      formLabelAlign: {
        id:"",
        year:"",
        incomeDate:"",
        source:"",
        money:"",
        icId:"",
      },
      //选择日期
      value1:'',
      //选择类别
      options: [{
        value: '1',
        label: '生活救助类'
      }, {
        value: '2',
        label: '医疗救助类'
      }, {
        value: '3',
        label: '子女助学类'
      }, {
        value: '4',
        label: '法律援助类'
      }, {
        value: '5',
        label: '其他类'
      }],

    }
  },
  methods:{
    add_data(){                    //点击按钮显示模态框事件
      this.dialogVisible=true;
    },
    FormCommit(){
      //提交保存
      let _this = this;
      //向后端返回输入所有的信息
      instance.post("/api/income/",{
        id:_this.formLabelAlign.id,
        year:_this.formLabelAlign.year,
        incomeDate:_this.formLabelAlign.incomeDate,
        source:_this.formLabelAlign.source,
        money:_this.formLabelAlign.money,
        icId:_this.formLabelAlign.icId,
      }).then(function (res) {
        if(res.data.code === 200){
          alert('提交成功');
          _this.getData();
          _this.formLabelAlign={};
          _this.dialogVisible = false;
          console.log(_this.tableData);
          _this.totalCount++;
        }
        else {
          if(res.data.code === 218){
            alert('暂无数据');
          }
          else {
            alert('出错啦');
          }
          console.log(res.data);
        }
      }).catch(function (err) {
        console.log(err);
      })

    },
    //获取数据库中数据
    getData(){
      let _this = this;
      instance.get("/api/income/").then(function (res){
        if(res.data.code === 200){
          _this.tableData = res.data.data;
          _this.totalCount = _this.tableData.length;
        }
        else {
          if(res.data.code === 218){
            alert('暂无数据');
          }
          else {
            alert('出错啦');
          }
        }
      }).catch(function (err){
        console.log(err);
      });
    },

    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
    // 改变每页显示的条数
      this.PageSize=val
    // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
    // 改变默认的页数
      this.currentPage=val
    },

    //多条件查询
    queryRecords(){
      let queryStr;
      let para_startDate,para_endDate,para_Id,para_category,para_year,para_minPrice,para_maxPrice;
      para_Id = (this.para_Id === '') ? '' : ('sId=' + this.para_Id);
      para_startDate = (this.para_startDate === '') ? '':('startDate=' + this.para_startDate);
      para_endDate = (this.para_endDate === '') ? '' : ('endDate=' + this.para_endDate);
      para_year = (this.para_year === '') ? '' : ('sYear=' + this.para_year);
      para_minPrice = (this.para_minPrice === '') ? '' : ('minPrice=' + this.para_minPrice);
      para_maxPrice = (this.para_maxPrice === '') ? '' : ('maxPrice=' + this.para_maxPrice);
      para_category = (this.para_category === '') ? '' : ('sCategory=' + this.para_category);
      if(this.para_Id === '' && this.para_startDate === '' && this.para_endDate === '' &&  this.para_year === '' && this.para_minPrice === '' &&  this.para_maxPrice ===''  && this.para_category === ''){
        queryStr = '';
      }
      else {
        queryStr = '?' + para_Id+ '&' + para_startDate + '&' + para_endDate + '&' + para_year  + '&'+ para_minPrice + '&' + para_maxPrice + '&' + para_category;
      }
      let _this = this;
      let url = '/api/income/';
      instance.get(url + queryStr).then(function (res) {
        if(res.data.code === 200){
          _this.tableData = res.data.data;
          _this.totalCount = _this.tableData.length;
        }
        else{
          console.log(res.data.code);
          //alert(res.data.code)
          // alert('查询出错啦，请重试');
        }
      }).catch(function (err) {
        console.log(err);
      })
    }


  },
  created() {
    this.getData();
  }
}
</script>


<style scoped>

</style>
